<script setup lang="ts">
import { ref } from 'vue'

// 非空断言
const inputDom = ref<HTMLInputElement | undefined>()
const btnClick = () => {
  // 可选链操作符，?前面的值不是unll或者undefined就返回问号后面的值,是unll或者undefined,返回undefined
  // 可选链操作符不可以做值的设置,只能用于get处理
  // 非空断言  语法  值!  表示该值一定不是null或者undefined  可用于get与set都可以，但一定要确保值非空才使用
  inputDom.value!.value = '123'
}
const arr = ref([
  { id: 1, name: '西瓜' },
  { id: 2, name: '香蕉' }
])
const liClick = (id: number) => {
  const findItem = arr.value.find(item => item.id === id)
  // findItem!.name = '张三'
  console.log(findItem?.name)
}
</script>

<template>
  <div class="app-page">app</div>
  <input type="text" ref="inputDom" />
  <button @click="btnClick">给input赋值</button>
  <ul>
    <li v-for="(item, index) in arr" :key="index" @click="liClick(item.id)">
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoped></style>
